require('./Mypdfviewer.styl');
import React from 'react';
import PDF from 'react-pdf-js';
import { setTimeout } from 'timers';
class Mypdfviewer extends React.Component {
  state = {};
  constructor(props) {
    super(props);
    this.state = {
      src: ''
    };

  }
  onDocumentComplete = (pages) => {
    this.setState({ page: 1, pages });
  }

  onPageComplete = (page) => {
    this.setState({ page }, () => {
      if (DingTalkPC.ua.isDesktop) {
        //pc微应用      
        setTimeout(() => {
          if (this.refs.section_print.canvas) {
             window.print();
          }
        }, 1000 * 1)

        // if (!this.arr) {
        //   this.arr = [];
        //   this.arr.push(this.refs.section_print.canvas);
        // } else {
        //   this.arr.push(this.refs.section_print.canvas);
        // }
        // if (this.state.page == this.state.pages) {
        //   // debugger
        //   console.log(this.arr);
        // }
        // this.handleNext();
      }
    });
  }

  handlePrevious = () => {
    this.setState({ page: this.state.page - 1 });
  }

  handleNext = () => {
    this.setState({ page: this.state.page + 1 });
  }

  renderPagination = (page, pages) => {
    let previousButton = <li className="previous" onClick={this.handlePrevious}><a href="#"><i className="fa fa-arrow-left"></i> 前一页</a></li>;
    if (page === 1) {
      previousButton = <li className="previous disabled"><a href="#"><i className="fa fa-arrow-left"></i> 前一页</a></li>;
    }
    let nextButton = <li className="next" onClick={this.handleNext}><a href="#">后一页 <i className="fa fa-arrow-right"></i></a></li>;
    if (page === pages) {
      nextButton = <li className="next disabled"><a href="#">后一页 <i className="fa fa-arrow-right"></i></a></li>;
    }
    return (
      <nav>
        <ul className="pager">
          {previousButton}
          {nextButton}
        </ul>
      </nav>
    );
  }

  render() {
    let pagination = null;
    if (this.state.pages) {
      pagination = this.renderPagination(this.state.page, this.state.pages);
    }
    return (
      <div>
        <PDF id="section_print" ref="section_print" file={`/its/download_file?file_id=${this.props.file}`} onDocumentComplete={this.onDocumentComplete} onPageComplete={this.onPageComplete} page={this.state.page} />
        {pagination}
      </div>
    )
  }
}

module.exports = Mypdfviewer;
